<template>
<div class="recycle-platform-detail views-container">
  <div class="wlm-form">
    <div class="wlm-form-header">回收站详情</div>
    <div class="wlm-form-content">
      <el-form :ref="formFormatData.key" :model="formFormatData.formData" size="small" label-width="120px" class="retail-form" label-position="right">
        <el-form-item label="平台名称">
          <el-input v-model="formFormatData.formData.name" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="平台区域" class="city">
           <p>{{formFormatData.formData.address}}</p>
        </el-form-item>
        <el-form-item label="所在用户">
          <p>{{formFormatData.formData.nickname}}</p>
        </el-form-item>
        <el-form-item label="选择产品">
          <el-select v-model="formFormatData.formData.package_id" placeholder="请选择" :disabled="true">
            <el-option v-for="item in productOptions" :key="item.product_id" :label="item.title" :value="item.product_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="packageOptions.length>0" label="选择套餐">
          <el-select v-model="formFormatData.formData.package" placeholder="请选择" :disabled="true">
            <el-option v-for="item in packageOptions" :key="item.value" :label="item.title" :value="item.package">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>

<script>
import {
  platformProduct,
  platformPackage,
  platformEditData
} from '@/api/platform'

import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'RecyclePlatformDetail',
  components: {

  },
  directives: {

  },
  data() {
    return {
      productOptions: [],
      packageOptions: [],
      formFormatData: {
        key: 'platform',
        api: {
          // editForm
          editForm: {
            api: platformEditData
          }
        },
        formData: {
          name: '',
          nickname: '',
          province: '',
          address: '',
          city: '',
          area: '',
          product: '',
          package_id: ''
        }
        // rules: {
        //   nickname: [
        //     { required: true, message: '请输入用户名', trigger: 'blur' },
        //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //   ],
        //   password: [
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        //   ],
        //   repassword: [
        //     { required: true, message: '请输入确认密码', trigger: 'blur' },
        //     { validator: checkPass, trigger: 'blur' }
        //   ],
        //   username: [
        //     { required: true, message: '登录手机号码', trigger: 'blur' },
        //     { validator: mobile, trigger: 'blur' }
        //   ]
        // }
      }
    }
  },
  created() {
    this.getProduct()
  },
  methods: {
    getProduct() {
      platformProduct().then((response) => {
        const { data: { data: productData = [] } = {}} = response
        this.productOptions = productData
      })

      platformPackage().then((response) => {
        const { data: { data: packageData = [] } = {}} = response
        this.packageOptions = packageData
      })
    }
  }
}
</script>
